<!--
 * 空内容
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-empty" :class="classes" :style="styles">
        <!-- 图标 -->
        <view class="pure-empty-icon">
            <!-- 兼容京东多slot写法 -->
            <slot name="icon" v-if="$slots.icon"></slot>
            <pure-icon :name="icon" :mode="mode" v-else></pure-icon>
        </view>

        <!-- 提示语 -->
        <view class="pure-empty-tip" v-if="tip || tip?.length">
            <!-- 兼容京东多slot写法 -->
            <slot name="tip" v-if="$slots.tip"></slot>
            <rich-text :nodes="tip" v-else></rich-text>
        </view>

        <!-- 底部 -->
        <view class="pure-empty-bottom">
            <!-- 兼容京东多slot写法 -->
            <slot v-if="$slots.default"></slot>
            <view class="pure-empty-button" :class="btnClass" v-else-if="btn">
                <pure-button
                    text="继续逛逛"
                    v-bind="btnProps"
                    @getphonenumber="handleGetPhoneNumber"
                    @getuserinfo="handleGetUserInfo"
                    @error="handleError"
                    @opensetting="handleOpenSetting"
                    @launchapp="handleLaunchApp"
                    @contact="handleContact"
                    @chooseavatar="handleChooseAvatar"
                    @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
                    @addgroupapp="handleAddGroupApp"
                    @chooseaddress="handleChooseAddress"
                    @chooseinvoicetitle="handleChooseInvoiceTitle"
                    @subscribe="handleSubscribe"
                    @login="handleLogin"
                    @im="handleIM"
                    @onClick="handleClick"
                ></pure-button>
            </view>
        </view>
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props,
        emits: [
            "getphonenumber",
            "getuserinfo",
            "error",
            "opensetting",
            "launchapp",
            "contact",
            "chooseavatar",
            "agreeprivacyauthorization",
            "addgroupapp",
            "chooseaddress",
            "chooseinvoicetitle",
            "subscribe",
            "login",
            "im",
            "onClick",
        ],
        computed: {
            // classes
            classes() {
                const classes = [];
                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },
        },
        methods: {
            // 点击事件
            handleClick() {
                this.$emit("onClick");
            },

            // getPhoneNumber
            handleGetPhoneNumber(e) {
                this.$emit("getphonenumber", e);
            },

            // getUserInfo
            handleGetUserInfo(e) {
                this.$emit("getuserinfo", e);
            },

            // error
            handleError(e) {
                this.$emit("error", e);
            },

            // openSetting
            handleOpenSetting(e) {
                this.$emit("opensetting", e);
            },

            // launchApp
            handleLaunchApp(e) {
                this.$emit("launchapp", e);
            },

            // contact
            handleContact(e) {
                this.$emit("contact", e);
            },

            // chooseAvatar
            handleChooseAvatar(e) {
                this.$emit("chooseavatar", e);
            },

            // agreePrivacyAuthorization
            handleAgreePrivacyAuthorization(e) {
                this.$emit("agreeprivacyauthorization", e);
            },

            // addGroupApp
            handleAddGroupApp(e) {
                this.$emit("addgroupapp", e);
            },

            // chooseAddress
            handleChooseAddress(e) {
                this.$emit("chooseaddress", e);
            },

            // chooseInvoiceTitle
            handleChooseInvoiceTitle(e) {
                this.$emit("chooseinvoicetitle", e);
            },

            // subscribe
            handleSubscribe(e) {
                this.$emit("subscribe", e);
            },

            // login
            handleLogin(e) {
                this.$emit("login", e);
            },
            // im
            handleIM(e) {
                this.$emit("im", e);
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
